import React, { Component } from 'react'

class Index extends Component {

    state = {
        list: ['资讯', '休闲', '生活', '社会', '搞笑', '体育'],
        showLength: 3,
        flag: true
    }

    showAllData() {
        if(this.state.flag){
            this.setState({
                showLength: this.state.list.length,
                flag: false
            })
        }
        else{
            this.setState({
                showLength: 3,
                flag: true
            })
        }
    }

    render() { 
        let { list, showLength, flag } = this.state
        return (
            <div>
                <button onClick={() => {
                    this.showAllData()
                }}>{ flag ? '点击展开' : '点击收起' }</button>
                <ul>
                    {
                        list && list.length ? list.map((item, index) => {
                            return <li key={index}>
                                {
                                    index < showLength ? item : ''
                                }
                            </li>
                        }) : ''
                    }
                </ul>
            </div>
        )
    }
}
 
export default Index;